<template>
  <div class="search">
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click="router.back()"
    />
  <van-search
    v-model.trim="keyword"
    show-action
    action-text="搜索"
    placeholder="请输入搜索关键词"
    shape="round"
    @input="inputFn"
  />

  <!-- 推荐 -->
  <van-cell-group>
    <van-cell
    :title="item"
    icon="search"
    v-for="(item, index) in getSuggestionList"
    :key="index"
    >
    </van-cell>
  </van-cell-group>

  <!-- 历史记录 -->
  <van-cell-group>
    <van-cell title="历史记录"></van-cell>
    <van-cell title="单元格">
      <van-icon name="close" />
    </van-cell>
  </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/scearch'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '',
      // 推荐列表
      getSuggestionList: []
    }
  },
  methods: {
    async inputFn () {
      if (!this.keyword) return
      const res = await getSuggestion(this.keyword)
      this.getSuggestionList = res.data.options
    }
  },
  heightList (str) {
    const reg = new RegExp(this.keyword, 'gi')
    return str.replace(reg, match => {
      return `<span style= "color: skyblur;">${match}</span>`
    })
  }
}
</script>

<style>

</style>
